	<template>
		<view class="callForPay">
			<view class="bg" style="margin: 20rpx;">
				<uni-forms ref="signUpForm" :value="signUpFormData" :rules="rules" style="padding:0 40rpx">
					<uni-forms-item label="" name="placeholder" label-width="80">
						<text style="">催款描述</text>
						<textarea placeholder-style="font-size:26rpx;color:#999999;padding-bottom:100rpx"
							style="margin-bottom: 30rpx; background-color: #fff; margin-top: 15rpx; border: 1px solid #DEDEDE;border-radius: 15rpx; width: 96%;padding:30rpx 20rpx 40rpx 30rpx"
							placeholder="感谢您一直的支持，现与您进行往来对账，请及时确认!" v-model="callForPayRemart" auto-height />
					</uni-forms-item>
				</uni-forms>
			</view>


			<!-- 流水明细 -->
			<view class="tableData" style="margin-bottom: 60rpx;">
				<scroll-view scroll-y="true" style="height: 100%;" @scrolltolower="lower">
					<view class="cItem " v-for="(item, index) in BIllcollectionListData" :key="index">
						<view class="cell">
							<text class="first" style="font-weight: bold;">单号: {{getReplaceId("S"+item.Id)}}</text>
						</view>
						<view class="cell">
							<text class="first">日期:</text>
							<text class="second">{{item.CreateTime?item.CreateTime.substring(0,10):''}}</text>
						</view>
						<view class="cell">
							<text class="first">逾期天数:</text>
							<text class="second">{{ item.OverdueDay + ' 天'}}</text>
						</view>
						<view class="cell">
							<text class="first">逾期金额:</text>
							<text class="second">￥{{item.Money}}</text>
						</view>
						<!-- 					<view class="cell">
						<text class="first">余额:</text>
						<text class="second">￥{{item.Owing}}</text>
					</view> -->
						<view class="cell button" @click="toWebView(item.Id,item.billlistId, item.OverdueDay)">
							<text>明细</text>
						</view>
						<!--	<view class="action">{{item.Type==0?'还款':item.Type==1?'赊货':'作废'}}<view>
					<view class="number">{{item.Money}}</view>
					<view class="number">{{item.Owing}}</view>
					<view class="action">
						<text v-if="item.Type!=0" @click="toDetail(item.BillId)">明细</text>
					</view> -->
					</view>
					<!-- 上拉显示更多 -->
					<view class="" style="padding-bottom: 60rpx;">
						<uniLoadMore :status="status" :contentText="contentText" :rows="BIllcollectionListData">
						</uniLoadMore>
					</view>
				</scroll-view>
				<!-- <table border="1" class="table">
				<thead>
					<th>日期</th>
					<th>逾期天数</th>
					<th>逾期金额</th>
					<th>余额</th>
					<th>操作</th>
				</thead>
				<tbody>
					<tr v-for="item in BIllcollectionListData" :key="item.Id" :class="item.Type==3?'warn':''">
						<td>{{item.CreateTime?item.CreateTime.substring(0,10):''}}</td>
						<td class="action">{{item.Type==0?'还款':item.Type==1?'赊货':'作废'}}</td>
						<td class="number">{{item.Money}}</td>
						<td class="number">{{item.Owing}}</td>
						<td class="action">
							<text v-if="item.Type!=0" @click="toDetail(item.BillId)">明细</text>
						</td>
					</tr>
				</tbody>
			</table> -->
			</view>

			<view class="" class="submitButton">
				<button form-type="submit" @click="handleSignUp" style="">催账</button>
			</view>

			<uni-popup ref="share" type="share" safeArea backgroundColor="#fff">
				<uni-popup-share @select="selectShare" :bottom-data="bottomData"></uni-popup-share>
			</uni-popup>
		</view>
	</template>

	<script>
		// 引入加载更多
		import uniLoadMore from '@/components/uni-load-more.vue'
		import {
			toThousands,
			momenyFormat,
			formatDate,
			getMonthRange
		} from '@/util/util.js'
		export default {
			components: {
				uniLoadMore
			},
			data() {
				return {
					// 加载状态
					status: "loading",
					contentText: {
						contentdown: '',
						contentrefresh: '加载中',
						contentnomore: '没有更多了'
					},
					// 时间范围
					range: [],
					pagination: {
						PageIndex: 1,
						PageRows: 10,
						SortField: "CreateTime",
						SortType: "desc",
					},
					querayPamras: {
						Search: {
							Condition: "",
							Keyword: "",
							CompanyId: "",
							CustomerId: "",
							Time: "",
							// 预期天数
							OverdueDay: ""
						}
					},
					total: 0,
					callForPayDetail: {},
					// 逾期催款明细
					BIllcollectionListData: [],
					// 当前时间
					endTime: formatDate('day'),
					signUpFormData: {
						// 默认提示placeholder
						placeholder: "感谢您一直的支持，现与您进行往来对账，请及时确认!"
					},
					// 催款备注
					callForPayRemart: uni.getStorageSync('callForPayRemart'),
					rules: {
						placeholder: {
							rules: [{
								required: true,
								errorMessage: '请输入催款描述'
							}]
						}
					},
					token: "",
					bottomData: [{
							text: '微信',
							icon: '/static/share/wx.png',
							name: 'wx'
						}
					]
				}
			},
			onShow() {
				// 获取token
				this.token = uni.getStorageSync('token')
				this.pagination.PageIndex = 1
				this.pagination.PageRows = 10
				this.BIllcollectionListData = []
				// 获取逾期催款明细
				this.getBIllcollectionDataList()
			},
			onLoad(options) {
				this.range = getMonthRange(1)
				this.callForPayDetail = JSON.parse(options.data)
				this.querayPamras.Search.CompanyId = this.callForPayDetail.CompanyId
				this.querayPamras.Search.CustomerId = this.callForPayDetail.CustomerId
				this.querayPamras.Search.Time = (this.callForPayDetail.CreateTime).substring(0, 10)
				this.querayPamras.Search.OverdueDay = this.callForPayDetail.OverdueDay
				this.querayPamras.Search.Condition = this.callForPayDetail.Id
			},
			// 下拉刷新
			onPullDownRefresh() {
				// 重置相关参数
				// 加载
				this.status = "loading"
				this.BIllcollectionListData = []
				this.pagination.PageIndex = 1
				this.pagination.PageRows = 10
				// 重新获取查询数据
				this.getBIllcollectionDataList()
				uni.stopPullDownRefresh(); //停止刷新
			},
			methods: {
				// 字符串空格处理
				getReplaceId(data){
					if(data){
						return data.replace(/\s/g, '').replace(/(.{4})/g, "$1 ")
					}
				},
				// 去小票页面
				toWebView(Id, billId, OverdueDay) {
					uni.navigateTo({
						url: '/pages/Arrears/webview?Id=' + Id + '&billId=' + billId + '&OverdueDay=' + OverdueDay
					})
				},
				// 触底加载
				lower() {
					if (this.BIllcollectionListData.length >= this.total) {
						this.contentText.contentnomore = "没有更多了"
						this.status = "noMore"
						return
					}
					this.getBIllcollectionDataList()
				},

				selectShare(e) {
					if (e.item.text == '微信') {
						let summary = this.callForPayRemart ? this.callForPayRemart : this.signUpFormData.placeholder
						this.$refs.signUpForm.validate().then(params => {
							uni.share({
								provider: "weixin",
								scene: "WXSceneSession",
								type: 0,
								title: '逾期提醒', // 分享催款描述
								summary: summary,
								href: 'https://shq.yoojet.com/#/App/Reconciliation?data=' + JSON.stringify({
									CompanyId: this.callForPayDetail.CompanyId,
									Id: this.callForPayDetail.Id,
									CustomerId: this.callForPayDetail.CustomerId,
									days: this.callForPayDetail.OverdueDay,
									token: this.token.replace('Bearer ', '')
								}),
								imageUrl: "https://hzq.yoojet.com/wx.png", //分享封面图片
								success: function(res) {
									console.log(res);
									// 此处是调起微信分享成功的回调
								},
								fail: function(err) {
									// 此处是调起微信分享失败的回调
									console.log(err);
								}
							});
						})

					} else {
						console.log('短信')

						this.$api.msg('待开发')


					}

				},
				// 明细
				toDetail(Id) {
					uni.navigateTo({
						url: '/components/page/Detail?id=' + Id
					})
				},
				// 获取逾期催款明细
				getBIllcollectionDataList() {
					var that = this
					this.status = "loading"
					this.$http('post', '/BO/BIlling/GetHistoryBIllingOverdueList', {
						...this.pagination,
						...this.querayPamras
					}).then(res => {
						if (res.Success) {
							let lists = res.Data
							if (lists.length == 0 || lists == []) {
								this.status = "noMore"
								return
							} else {
								this.total = res.Total
								res.Data.forEach(item => {
									item.Money = toThousands(item.Money)
									item.Owing = toThousands(item.Owing)
								})
								if (this.pagination.PageIndex == 1) {
									this.BIllcollectionListData = res.Data
									this.pagination.PageIndex += 1
								} else {
									this.BIllcollectionListData = this.BIllcollectionListData.concat(lists)
									this.pagination.PageIndex += 1
								}
								if (this.pagination.PageIndex * this.pagination.PageRows >= this.total) {
									// this.contentText.contentnomore = "没有更多了"
									setTimeout(function() {
										that.status = "noMore"
									}, 100)
									return
								}
							}

						} else {
							this.status = "noMore"
							this.$api.msg(res.Msg)
							return
						}


					})
				},
				handleSignUp() {
					// console.log('分享了', this.callForPayRemart)
					// console.log('http://192.168.1.64:8081/#/App/Reconciliation?data=' + JSON.stringify({
					// 	CompanyId: this.callForPayDetail.CompanyId,
					// 	Id: this.callForPayDetail.Id
					// }));
			
					this.$refs.share.open()
				},
				// 千分位
				momenyFormat(num) {
					return momenyFormat(num)
				}
			}
		}
	</script>

	<style lang="scss" scoped>
		.callForPay {
			height: 100%;
			width: 100%;
			background-image: url('/static/background.png');
			background-size: cover;
			box-sizing: border-box;
			overflow-y: scroll;
			padding-bottom: 100rpx;

			.warn {
				background-color: #ff9999;
			}

			.bg {
				margin: 0;
				background-color: rgba(255, 255, 255, .8);
				// padding: 20rpx 0;
				// padding: 20rpx 0 0.1rem 0;
				border-radius: 10rpx;
				margin-bottom: 10px;
				padding-right: 20rpx;
				padding-top: 20rpx;
			}

			.money {
				box-sizing: border-box;
				padding: 20rpx;
				display: flex;
				background-color: #fff;
			}

			.tableData {
				width: 100%;
				// 兼容H5和APP
				/* #ifdef H5 */
				height: calc(100vh - 280px);
				/* #endif */
				/* #ifdef APP */
				height: calc(100vh - 200px);
				/* #endif */


				// background-color: #fff;
				padding: 0 20rpx;
				box-sizing: border-box;

				.cItem {
					background-color: #fff;
					padding: 20rpx;
					margin-bottom: 20rpx;
					border-radius: 10rpx;

					.cell.button {
						display: flex;
						justify-content: flex-end;

						text {
							border-bottom: 1px solid #2979ff;
							color: #2979ff;
						}
					}

					.cell {
						display: flex;

						.first {
							flex: 5;
						}

						.second {
							flex: 5;
						}
					}
				}

				.table {
					background-color: #fff;
					width: 100%;
					border-collapse: collapse;
					border-color: #ececec;

					td {
						padding: 0 10rpx;
						line-height: 2;

						text {
							color: blue;
						}
					}

					.number {
						text-align: right;
					}

					.action {
						text-align: center;
					}
				}
			}

			.submitButton {
				background-color: #FFF;
				position: fixed;
				bottom: 0;
				width: 100%;
				padding: 30rpx 20rpx;
				box-sizing: border-box;

				button {
					padding: 5rpx;
					background-color: #0493FF;
					color: #fff;
					// margin-top: 100rpx;
					font-size: 30rpx;
					font-weight: bold;
				}
			}
		}
	</style>